/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-05-10 15:10:41
 * @LastEditTime: 2023-10-16 18:20:41
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */
import { Box, Button, Divider, Flex, Heading, Text } from '@chakra-ui/react';
import { RootState } from 'store/store';

import { useAppDispatch, useAppSelector } from 'store/storeHooks';
import { addSelectedOption, Question, TopicOption } from 'features/question/store/questionSlice';
interface QProps {
  question: Question;
}
const AList = ['A', 'B', 'C', 'D'];
const Card = ({ question }: QProps) => {
  const dispatch = useAppDispatch();

  const { topic, topic_cn, option, id: qId } = question;

  const { selectedOption } = useAppSelector((store: RootState) => store.question);
  return (
    <Flex
      flexDirection="column"
      px={{
        base: 4,
        lg: 6,
        xl: 6,
        '2xl': 8,
        '1080p': 10,
        '2k': 12,
        '4k': 20,
      }}
      py={{
        base: 4,
        lg: 6,
        xl: 8,
        '2xl': 10,
        '1080p': 12,
        '2k': 14,
        '4k': 24,
      }}
      shadow="2xl"
      backdropFilter="auto"
      backdropBlur="20px"
    >
      <Box>
        <Heading
          fontSize={{ base: 'xl', '1080p': '2xl', '2k': '4xl', '4k': '6xl' }}
          color="brand.700"
        >
          {topic}
        </Heading>
        <Heading
          fontSize={{ base: 'lg', '1080p': 'xl', '2k': '3xl', '4k': '5xl' }}
          mt="2"
          color="brand.700"
        >
          {topic_cn}
        </Heading>
      </Box>
      <Divider
        my={{ base: 4, lg: 6, xl: 10 }}
        bg="brand.900"
        borderColor="brand.900"
      ></Divider>
      <Flex
        grow="1"
        flexDirection="column"
        gap={{ base: 4, lg: 5, xl: 6, '2xl': 7, '1080p': 8, '2k': 10, '4k': 14 }}
        justify="space-around"
      >
        {option.map((o: TopicOption, index: number) => {
          return (
            <Button
              colorScheme="brand"
              key={o.id}
              rounded="none"
              color="brand.600"
              bg="brand.100"
              h="max-content"
              minH={{ base: 10, '1080p': 12, '2k': 16, '4k': 24 }}
              px={{ base: 2, lg: 2, xl: 3, '1080p': 4 }}
              isActive={selectedOption[qId] === o.id}
              onClick={() => {
                dispatch(addSelectedOption({ qId, aId: o.id }));
              }}
              _hover={{ bg: 'brand.300', color: 'brand.700' }}
              _active={{ bg: 'brand.700', color: 'brand.100' }}
              textAlign="left"
              justifyContent="start"
            >
              <Text
                fontSize={{ base: 'lg', '1080p': 'xl', '2k': '3xl', '4k': '4xl' }}
                mr={{ base: 2, lg: 3, xl: 4, '1080p': 6 }}
              >
                {`${AList[index]  }.`}
              </Text>
              <Box whiteSpace="normal">
                <Text fontSize={{ base: 'md', '1080p': 'lg', '2k': '2xl', '4k': '4xl' }}>
                  {o.value}
                </Text>

                <Text fontSize={{ base: 'sm', '1080p': 'md', '2k': '2xl', '4k': '4xl' }}>
                  {o.value_cn}
                </Text>
              </Box>
            </Button>
          );
        })}
      </Flex>
    </Flex>
  );
};

export default Card;
